import axios from 'axios'
import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { aUrl } from '../../../static/axios_url'
import './index.css'
export default function Jfbill() {
    const bill_type = ['全部', '代付款', '代发货', '待收货', '待评价', '退款/售后', '已完成/关闭']
    const [jfbill, setjfbill] = useState([])
    const [billData, setbillData] = useState([])

    useEffect(() => {
        document.querySelector('.bill_type span:first-of-type').className = 'check'
        axios.post(aUrl + '/mycenter/myjfBill').then(res => {
            console.log(res.data);
            setjfbill(res.data)
            setbillData(res.data);
        })
    }, [])
    function billTypeClick(num) {
        return () => {
            const billTypeSpan = document.querySelectorAll('.bill_type span')
            for (var i = 0; i < billTypeSpan.length; i++) {
                billTypeSpan[i].className = ''
            }
            billTypeSpan[num].className = 'check'
            var bills = []
            if (num === 0) {
                bills = [...billData]
            } else {
                billData.forEach(v => {
                    if (v.jfb_type === num) {
                        bills.push(v)
                    }
                })
            }
            setjfbill(bills)
        }
    }
    return (
        <div className='jfbill'>
            <h3 className="tt">积分订单</h3>
            <div className='bill_main'>
                <ul className='bill_type clear'>
                    {
                        bill_type.map((bill_type, i) => {
                            return <li key={i} onClick={billTypeClick(i)}><span>{bill_type}</span><i>|</i></li>
                        })
                    }
                    <li>订单回收站</li>
                </ul>
                <ul className='bill_Lis'>
                    {
                        jfbill.map((jfbill, i) => {
                            return <li key={i}>
                                <div className='bill_heard'>
                                    <span>订单号：{jfbill.jfb_num}</span>
                                    <span>下单日期:{jfbill.jfb_time}</span>
                                    <span>订单状态：<i style={{ color: '#f08200' }}>{jfbill.jfb_state}</i></span>
                                </div>
                                <div className='bill_right'>
                                    <ul className='bill_good'>
                                        <li key={i}>
                                            <img src={jfbill.img} alt="" />
                                            <span>{jfbill.title}</span>
                                            <span>{jfbill.gui_ge}个装</span>
                                            <span>x{jfbill.g_num}</span>
                                        </li>
                                    </ul>

                                    <div className="zong_jia">
                                        <div>
                                            <span>积分{jfbill.jf * jfbill.g_num}</span>
                                        </div>
                                    </div>
                                    <div className='cao_zuo'>
                                        <div className={jfbill.jfb_type === 1 ? 'show' : ''}>
                                            <Link to='/mycenter/orddet'>查看详情</Link>
                                            <span>去支付</span>
                                            <span style={{ backgroundColor: '#999999' }}>取消订单</span>
                                        </div>
                                        <div className={jfbill.jfb_type === 2 ? 'show' : ''}>
                                            <Link to='/mycenter/orddet'>查看详情</Link>
                                            <span>申请退款</span>
                                        </div>
                                        <div className={jfbill.jfb_type === 3 ? 'show' : ''}>
                                            <Link to='/mycenter/orddet'>查看详情</Link>
                                            <span>确认收货</span>
                                            <span>查看物流</span>
                                        </div>
                                        <div className={jfbill.jfb_type === 4 ? 'show' : ''}>
                                            <Link to='/mycenter/orddet#'>查看详情</Link>
                                            <span>去评价</span>
                                        </div>
                                        <div className={jfbill.jfb_type === 5 ? 'show' : ''}>
                                            <Link to='/mycenter/orddet'>查看详情</Link>
                                        </div>
                                        <div className={jfbill.jfb_type === 6 ? 'show' : ''}>
                                            <Link to='/mycenter/orddet'>查看详情</Link>
                                            <span>删除订单</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        })
                    }
                </ul>
            </div>
        </div>
    )
}
